<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-input v-model="pageFrom.modelName" placeholder="请输入品牌名称"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" @click="openDialog">添加模块</el-button>
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="brandModelList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="100"
                       type="index"
      ></el-table-column>
      <el-table-column label="品牌名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.brandName }}
        </template>
      </el-table-column>
      <el-table-column label="型号" align="center">
        <template slot-scope="scope">
          {{ scope.row.modelName }}
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          {{ scope.row.modelImg }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="editDialog(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delConfirm(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageFrom.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageFrom.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageFrom.pageTotal">
      </el-pagination>
    </div>


    <el-dialog :title="dialogForm.title" :visible.sync="dialogForm.visible" @close="closeDialog">
      <el-form :model="brandModelForm">
        <el-form-item label="品牌名称" >
          <el-input v-model="brandModelForm.brandName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  import {getBrandModelListPage, addBrandModel, updBrandModel, delBrandModel, getBrandModelById} from '@/api/brandModel'
  import axios from "axios";
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        // 分页查询参数对象
        pageFrom: {
          modelName:"",
          total: 1,
          current: 1,
          size: 10
        },
        dialogForm: {
          visible: false,
          title: "新增",
        },
        formRules: {},
        brandModelList: [],
        listLoading: true,
        brandModelForm: {
          id: "0",
          brandId: '',
          brandName: '',
          modelName: "",
          modelImg: ""
        },
        // 上传文件
        addfileList: [],
        fileList: [],
        // 文件上传地址
        actionUrl: ''
      }
    },
    created() {
      this.actionUrl = axios.defaults.baseURL + '/upload/apk'
      this.fetchData(this.pageFrom)
    },
    computed: {
      headers() {
        return {
          "authorization": getToken() // 直接从本地获取token就行
        }
      }
    },
    methods: {
      closeDialog() {
        this.dialogForm.visible = false
      },
      clearForm() {
      },
      onSubmit() {
        if (this.apkVersionForm.id === "0") {
          addBrandModel(this.apkVersionForm).then(response => {
            this.clearForm();
          }).catch(error => {
            this.clearForm();
          });
        } else {
          updBrandModel(this.apkVersionForm).then(response => {
            this.clearForm();
          }).catch(error => {
            this.clearForm();
          });
        }
        this.closeDialog()
        this.fetchData(this.pageFrom)
      },
      openDialog() {
        this.dialogForm.visible = true
        this.dialogForm.title = "新增"
      },
      editDialog(row) {
        this.dialogForm.visible = true
        this.dialogForm.title = "修改"

        getBrandModelById(row.id).then(response => {
          this.brandModelForm.id = response.data.id
        })
      },
      delConfirm(row) {
        console.log(row.id)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delBrandModel(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.fetchData(this.pageFrom)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      fetchData(data) {
        this.listLoading = true
        getBrandModelListPage(data).then(response => {
          this.brandModelList = response.data.records
          this.listLoading = false
          this.pageFrom.size = parseInt(response.data.size)
          this.pageFrom.total = parseInt(response.data.total)
        })
      },

      handleSizeChange(val) {
        this.pageFrom.size = val
        this.fetchData(this.pageFrom)
      },
      handleCurrentChange(val) {
        this.pageFrom.current = val
        this.fetchData(this.pageFrom)
      },

      //删除上传文件
      handleRemove(file, fileList) {
        this.brandModelForm.modelImg = ''
      },
      handlePreview(file) {
        // console.log(file);
      },
      //上传文件让第二次覆盖第一的文件
      handleChange(file, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]
        }
      },
      reSuccess(response) {
        if (response.code === '0') {
          this.brandModelForm.modelImg = response.data
          this.$message.success('文件上传成功')
        }
      },
    }
  }
</script>
<style>
  .imguserPhoto {
    width: 100px;
  }

  .el-input {
    width: 200px;
  }

  .el-row {
    margin-bottom: 20px;
  }
</style>
